/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog :title="'新增任务'" :visible.sync="show" append-to-body width="650px" :before-close="handleClose">
    <el-form :inline="true" :model="formInline" label-width="90px">
      <el-row>
        <el-form-item label="巡检名称：">
          <el-input   v-model="formInline.taskName" placeholder="巡检名称"></el-input>
        </el-form-item>
        <el-form-item label="选择方案：">
          <el-select
            v-model="formInline.patrolPlanId"
            value-key="id"
            filterable
            clearable
            style="width: 200px"
            placeholder="输入选择方案"
          >
            <el-option
              v-for="item in optionsList"
              :key="item.id"
              :label="item.patrolPlanName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="开始时间：">
          <el-date-picker
            v-model="formInline.startTime"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
            class="curveDate"
            style="width: 200px"
          >
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="选择场站：">
          <el-select
            v-model="formInline.city"
            value-key="id"
            filterable
            clearable
            style="width: 200px"
            @change="getCity"
          >
            <el-option
              v-for="item in optionsListCity"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-select
            v-model="formInline.districtId"
            value-key="id"
            filterable
            clearable
            style="width: 200px"
            @change="getDist"
          >
            <el-option
              v-for="item in optionsListDist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row v-if="selectItemType.length>0">
        <el-form-item label="已选充电站:">
          <div class="selectWork">
            <div  v-for="item in selectItemType" class="tab" :class="item.flag?'tabAction':'tabOn'" @click="changeWork(item)">
              {{item.staName }}
            </div>
          </div>
          <div class="selected">
              <span class="selectType" @click="selectAll">
                全选
              </span>
            <span class="selectType" @click="invert">
                反选
              </span>
          </div>
        </el-form-item>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="checkBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {patrol,plan} from '../../api/inspection/apiUntil'

export default {
  props: ['DialogPatrolShow'],
  data() {
    return {
      show: false,
      optionsListCity: [],
      optionsListDist: [],
      optionsList: [],
      itemType: '',
      selectItemType: [],
      formInline: {
        taskName: '',
        patrolPlanId: '',
        districtId:'',
        startTime:'',
        stationIds:[],
        city:'',
        dist:''
      },
    };
  },
  mounted() {
    //显示弹窗
    this.show = this.DialogPatrolShow
    this.getOptionsList()
    this.getPlanCity()
  },
  methods: {
    //方案列表
    getOptionsList() {
      let params = {
        pageNum: 1,
        pageSize:10000,
      }
      patrol.getPatrolQuery(params).then((res) => {
        if (res) {
          this.optionsList = res.data
        }
      })
    },
    //城市列表
    getPlanCity(){
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
      })
    },
    // //区列表
    // getPlanDist(){
    //   let params ={
    //     code:this.formInline.city
    //   }
    //   plan.getPlanDist(params).then((res) => {
    //     this.optionsListDist = res.data
    //   })
    // },
    getCity(e){
      if(e){
        this.optionsListDist = []
        this.optionsListCity.forEach((item)=>{
          if(item.id===e){
            this.optionsListDist = item.children
          }
        })
      }else {
        this.formInline.districtId=''
      }
    },
    getDist(){
      this.getPlanStat()
    },
    //站
    getPlanStat(){
      let params ={
        id:this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        if(res.data){
          this.selectItemType = res.data||[]
          this.selectItemType.map((item)=>{
            this.$set(item,'flag',false)
          })
        }

      })
    },
    changeWork(item){
      item.flag =! item.flag
    },
    selectAll(){
      this.selectItemType.map((item)=>{
        this.$set(item,'flag',true)
      })
    },
    invert(){
      this.selectItemType.map((item)=>{
        if(item.flag){
          this.$set(item,'flag',false)
        }else {
          this.$set(item,'flag',true)
        }
      })
    },
    //关闭弹窗
    handleClose() {
      this.show = false
      this.$emit('closeDialog')
    },
    getResult(res) {
      if (res.code === 200) {
        this.$message({
          message: '新增成功',
          type: 'success'
        });
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
      this.handleClose()
    },
    checkBtn() {
      this.selectItemType.map((item)=>{
        if(item.flag){
          this.formInline.stationIds.push(item.id)
        }
      })
      let {city,dist, ...param} = this.formInline
      plan.getTaskAdd(param).then((res) => {
        this.getResult(res)
      })
    }
  }
};
</script>

<style lang="scss" scoped>
> > > .el-dialog__header {
  padding: 20px !important;
  background: #1B7B87;
}

> > > .el-dialog__title {
  color: #fff !important;
  font-size: 16px;
}

.selectWork {
  width: 510px;
  border: 1px solid #ccc;
 max-height: 300px;
  border-radius: 3px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 50px;
  overflow: auto;
}
.selected{
  width: 480px;
  position: absolute;
  bottom: 1px;
  left: 3px;
  margin-top: 18px;
  display: flex;
  justify-content: flex-start;
  background: #fff;
  padding: 10px 0;
  .selectType{
    display: inline-block;
    height: 20px;
    line-height: 18px;
    padding: 2px 10px;
    background: #ccc;
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    border-radius: 2px;
    cursor: pointer;
  }
}
.tab {
  padding: 10px 20px 10px 10px;
  color: #fff;
  display: inline-block;
  height: 25px;
  line-height: 3px;
  text-align: center;
  border-radius: 3px;
  margin: 10px;
  position: relative;
  cursor: pointer;
  .closeIcon {
    display: inline-block;
    height: 15px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
}
.tabAction{
  background: #0c9ab1;
}
.tabOn{
  background: #ccc;
}
</style>
